import React from 'react';
import Taro from '@tarojs/taro';
import {View, Image, Text, Block} from '@tarojs/components'
import {Good} from '../../utils/server.interface'
import {platform} from "../../utils/platform-settting.service";
import Float from '../../components/float/float';
import './small-goods-box.scss'

const SmallGoodsBox: React.FC<{ data: Good[] }> = (props) => {
  const goods = props.data.slice()
  const dataColor = Taro.getStorageSync('colorData');

  const renderRefundSignOfRight = (item) => {
    const refund_signArr = item.refund_sign ? item.refund_sign.split(",") : "";

    if(refund_signArr.length > 0) {
      return refund_signArr.map(sign => (
        !!sign &&
        <Text
          className='label'
          style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
        >{sign}</Text>
      ))
    }

    return <Block />;
  }

  return (
    <View className='small-goods-box'>
      <View className='left'>
        {goods.length > 0 && goods.map((item, index) => <Block key={item.id}>{index % 2 === 0 &&
        <View className='good-item-box' onClick={()=>{Taro.navigateTo({url: item.url})}}>
          <View className='img-box'>
            {item.price ?
              <Image
                src={item.main_img || item.img || 'https://resource.ivcheng.com/resources/images/zhanwei.jpg'}
                mode='widthFix' className={`img ${process.env.TARO_ENV + 'img'}`}
              />
              :
              <Image
                src={item.main_img || item.img || 'https://resource.ivcheng.com/resources/images/zhanwei.jpg'}
                mode='aspectFill' className={`img h ${process.env.TARO_ENV + 'img'}`}
              />
            }
            <View className='tips'>{item.cityName}{item.category_name ? '·' + item.category_name : ''}</View>
            {!item.price &&
            <Block>
              <View className='top-title-box-bg' />
              <View className='top-title-box'><View className='top-title'>{item.name}</View>
                <View className='go-look'>去看看</View>
              </View>
            </Block>}
          </View>
          {!!item.price && <Block>
            <View className='title-box-name'><View className='titleTop'>{item.name}</View></View>
            {item.sub_title && <View className='sub-title'>{item.sub_title}</View>}
            {
              (item.serviceLabels || item.refund_sign) &&
              <View className='labels'>
                {
                  item.serviceLabels.map((i, d) => <Text
                    className='label'
                    key={d}
                    style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
                  >{i.name}</Text>)
                }
                {
                  process.env.P_ENV === 'kd' && item.refund_sign &&
                  renderRefundSignOfRight(item)
                }
              </View>
            }
            <View className='price-box'>
              <View className='price-box-true'>
                <View className='view-inline'>
                  <Text style={`color: ${dataColor.priceColor}`}
                    className='symbol font-family-price view-inline'
                  >¥</Text>
                  <View style={`color: ${dataColor.priceColor}`} className='number font-family-price view-inline scale-price-font'><Float
                    value={item.price}
                  /></View>
                </View>
                {(!!item.price && !!item.discount) && <Text className='small-goods-box-discount'
                  style={`background-color: ${dataColor.discountBgColor}`}
                >{item.discount}折</Text>}
                {item.is_vip_price === 1 && <Text className='members-enjoy-text'>会员享</Text>}
                <View style={`color: ${dataColor.originalPriceColor}`}
                  className='price-right inline'
                >￥{item.market_price || item.marketPrice || 0}</View>
              </View>
            </View>
            {!!platform.info.is_show_sales_volume && !!item.salesVolume &&
            <View className='price-box-buy'>销量：{item.salesVolume}笔</View>}
          </Block>}
        </View>}</Block>)}
      </View>
      <View className='right'>
        {goods.length > 0 && goods.map((item, index) => <Block key={item.id}>{index % 2 === 1 &&
        <View className='good-item-box' onClick={()=>{Taro.navigateTo({url: item.url})}}>
          <View className='img-box'>
            {item.price ?
              <Image
                src={item.main_img || item.img || 'https://resource.ivcheng.com/resources/images/zhanwei.jpg'}
                mode='widthFix' className={`img ${process.env.TARO_ENV + 'img'}`}
              />
              :
              <Image
                src={item.main_img || item.img || 'https://resource.ivcheng.com/resources/images/zhanwei.jpg'}
                mode='aspectFill' className={`img h ${process.env.TARO_ENV + 'img'}`}
              />
            }
            <View className='tips'>{item.cityName}{item.category_name ? '·' + item.category_name : ''}</View>
            {!item.price &&
            <Block>
              <View className='top-title-box-bg' />
              <View className='top-title-box'><View className='top-title'>{item.name}</View>
                <View className='go-look'>去看看</View>
              </View>
            </Block>}
          </View>
          {!!item.price && <Block>
            <View className='title-box-name'><View className='titleTop'>{item.name}</View></View>
            {item.sub_title && <View className='sub-title'>{item.sub_title}</View>}
            {item.serviceLabels && <View className='labels'>{item.serviceLabels.map((i, d) => <Text
              className='label'
              key={d}
              style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
            >{i.name}</Text>)}</View>}
            <View className='price-box'>
              <View className='price-box-true'>
                <View className='view-inline'>
                  <Text style={`color: ${dataColor.priceColor}`}
                    className='symbol font-family-price view-inline'
                  >¥</Text>
                  <View style={`color: ${dataColor.priceColor}`} className='number font-family-price view-inline scale-price-font'><Float
                    value={item.price}
                  /></View>
                </View>
                {(!!item.price && !!item.discount) && <Text className='small-goods-box-discount'
                  style={`background-color: ${dataColor.discountBgColor}`}
                >{item.discount}折</Text>}
                {item.is_vip_price === 1 && <Text className='members-enjoy-text'>会员享</Text>}
                <View style={`color: ${dataColor.originalPriceColor}`}
                  className='price-right inline'
                >￥{item.market_price || item.marketPrice || 0}</View>
              </View>
            </View>
            {!!platform.info.is_show_sales_volume && !!item.salesVolume &&
            <View className='price-box-buy'>销量：{item.salesVolume}笔</View>}
          </Block>}
        </View>}</Block>)}
      </View>

    </View>
  )
}
SmallGoodsBox.defaultProps = {
  data: []
}

export default SmallGoodsBox
